<template>
	<image class="fm-service-button" src="@/static/image/fm-service.png" mode="widthFix" @click="goService"
		@touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" :style="{ top: buttonTop + 'px' }" />
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	const buttonTop = ref(480); // 按钮初始位置
	let startY = 0; // 记录触摸起始位置
	const DraggableButtonKey = 'buttonTop';
	// 从本地存储中加载按钮位置
	onMounted(() => {
		const storedTop = uni.getStorageSync(DraggableButtonKey); // 使用 uni.getStorageSync 获取本地存储
		if (storedTop) {
			buttonTop.value = parseInt(storedTop, 10); // 解析为整数并设置为按钮位置
		}
	});

	const startDrag = (e : TouchEvent) => {
		startY = e.touches[0].clientY - buttonTop.value; // 记录触摸起始位置
	};

	const onDrag = (e : TouchEvent) => {
		buttonTop.value = e.touches[0].clientY - startY; // 根据触摸位置更新按钮位置
	};

	const endDrag = () => {
		// 拖动结束后保存按钮位置到本地存储
		uni.setStorageSync(DraggableButtonKey, buttonTop.value.toString()); // 使用 uni.setStorageSync 存储
	};

	const goService = () => {
		uni.navigateTo({
			url: '/pages/official-account/index'
		});
	};
</script>

<style scoped>
	.fm-service-button {
		position: fixed;
		right: 0px;
		/* 相对于右侧 */
		width: 90px;
		height: 90px;
		z-index: 99;
	}
</style>